<template>
  <view class="radio-example">
    <text class="example-title">Radio 单选框组件示例</text>

    <!-- 基础用法 -->
    <view class="example-section">
      <text class="section-title">基础用法</text>
      <comp-radio v-model="radio1" :value="true">单选框</comp-radio>
      <view class="example-value">当前值: {{ radio1 }}</view>
    </view>

    <!-- 禁用状态 -->
    <view class="example-section">
      <text class="section-title">禁用状态</text>
      <view class="radio-row">
        <comp-radio v-model="radio2" :value="false" disabled>未选中禁用</comp-radio>
        <comp-radio v-model="radio3" :value="true" disabled>选中且禁用</comp-radio>
      </view>
    </view>

    <!-- 自定义颜色 -->
    <view class="example-section">
      <text class="section-title">自定义颜色</text>
      <comp-radio v-model="radio4" :value="true" checked-color="#ff6700">自定义颜色</comp-radio>
    </view>

    <!-- 单选框尺寸 -->
    <view class="example-section">
      <text class="section-title">不同尺寸</text>
      <view class="radio-row">
        <comp-radio v-model="sizeRadio" :value="'small'" size="small">小尺寸</comp-radio>
        <comp-radio v-model="sizeRadio" :value="'medium'" size="medium">中尺寸</comp-radio>
        <comp-radio v-model="sizeRadio" :value="'large'" size="large">大尺寸</comp-radio>
      </view>
      <view class="example-value">当前选中: {{ sizeRadio }}</view>
    </view>

    <!-- 带边框 -->
    <view class="example-section">
      <text class="section-title">带边框</text>
      <view class="radio-row">
        <comp-radio v-model="borderRadio" :value="'1'" bordered>选项1</comp-radio>
        <comp-radio v-model="borderRadio" :value="'2'" bordered>选项2</comp-radio>
      </view>
      <view class="example-value">当前选中: {{ borderRadio }}</view>
    </view>

    <!-- 单选框组 -->
    <view class="example-section">
      <text class="section-title">单选框组</text>
      <comp-radio-group v-model="groupValue" @change="onGroupChange">
        <comp-radio :value="'A'">选项 A</comp-radio>
        <comp-radio :value="'B'">选项 B</comp-radio>
        <comp-radio :value="'C'">选项 C</comp-radio>
      </comp-radio-group>
      <view class="example-value">当前选中: {{ groupValue }}</view>
    </view>

    <!-- 水平排列 -->
    <view class="example-section">
      <text class="section-title">水平排列</text>
      <comp-radio-group v-model="horizontalValue" direction="horizontal">
        <comp-radio :value="'A'">选项 A</comp-radio>
        <comp-radio :value="'B'">选项 B</comp-radio>
        <comp-radio :value="'C'">选项 C</comp-radio>
      </comp-radio-group>
      <view class="example-value">当前选中: {{ horizontalValue }}</view>
    </view>

    <!-- 禁用整组 -->
    <view class="example-section">
      <text class="section-title">禁用整组</text>
      <comp-radio-group v-model="disabledGroupValue" disabled>
        <comp-radio :value="'A'">选项 A</comp-radio>
        <comp-radio :value="'B'">选项 B</comp-radio>
        <comp-radio :value="'C'">选项 C</comp-radio>
      </comp-radio-group>
    </view>

    <!-- 按钮样式 -->
    <view class="example-section">
      <text class="section-title">按钮样式</text>
      <comp-radio-group v-model="buttonValue" button>
        <comp-radio :value="'A'" button>选项 A</comp-radio>
        <comp-radio :value="'B'" button>选项 B</comp-radio>
        <comp-radio :value="'C'" button>选项 C</comp-radio>
      </comp-radio-group>
      <view class="example-value">当前选中: {{ buttonValue }}</view>
    </view>

    <!-- 方法调用 -->
    <view class="example-section">
      <text class="section-title">方法调用</text>
      <comp-radio v-model="methodRadio" :value="true" ref="radioRef">通过方法控制</comp-radio>
      <view class="button-row">
        <button class="action-button" @click="setChecked">设为选中</button>
      </view>
      <view class="example-value">当前值: {{ methodRadio }}</view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref, computed, onMounted } from 'vue';
  import CompRadio from './Index.vue';
  import CompRadioGroup from './Group.vue';

  // 基础用法
  const radio1 = ref(false);

  // 禁用状态
  const radio2 = ref(false);
  const radio3 = ref(true);

  // 自定义颜色
  const radio4 = ref(true);

  // 单选框尺寸
  const sizeRadio = ref('medium');

  // 带边框
  const borderRadio = ref('1');

  // 单选框组
  const groupValue = ref('A');

  // 单选框组变更事件
  const onGroupChange = (value: string | number | boolean) => {
    console.log('单选框组变更:', value);
  };

  // 水平排列
  const horizontalValue = ref('A');

  // 禁用整组
  const disabledGroupValue = ref('B');

  // 按钮样式
  const buttonValue = ref('A');

  // 方法调用
  const methodRadio = ref(false);
  const radioRef: any = ref(null);

  // 设置选中状态
  const setChecked = () => {
    radioRef.value?.setChecked();
  };
</script>

<style lang="scss" scoped>
  .radio-example {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;

    .example-title {
      font-size: 24px;
      margin-bottom: 20px;
      color: #333;
      display: block;
    }

    .example-section {
      margin-bottom: 30px;

      .section-title {
        font-size: 18px;
        margin-bottom: 10px;
        color: #666;
        display: block;
      }

      .example-value {
        margin-top: 8px;
        color: #666;
        font-size: 14px;
      }

      .radio-row {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 10px;
      }
    }

    .button-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 10px;
    }

    .action-button {
      padding: 8px 16px;
      background-color: #1989fa;
      color: #fff;
      border: none;
      border-radius: 4px;
      font-size: 14px;
    }
  }
</style>